<template>
  <div class="organization">
    <!-- 上面的部分 -->
    <div class="top">
      <div>
        <!-- 伪类部分 -->
        <div>
          <span class="top-organization">新增机构信息</span>
        </div>
      </div>
    </div>
    <hr class="line" />
    <!-- 中间的部分 -->
    <div class="middile">
      <div>机构信息</div>
      <div style="display: flex; justify-content: space-between">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <div
            style="
              display: flex;
              justify-content: space-between;
              text-align: left;
            "
          >
            <el-form-item label="机构编号" :style="{ width: '300px' }">
              20000
            </el-form-item>
            <el-form-item
              label="机构名称"
              prop="name"
              :style="{
                width: '300px',
              }"
            >
              <el-input v-model="ruleForm.name" />
            </el-form-item>
          </div>
          <div style="display: flex; justify-content: space-between">
            <el-form-item label="联系人姓名">
              <el-input v-model="getDataObj.contactName" />
            </el-form-item>
            <el-form-item
              label="&nbsp;&nbsp;联系电话"
              :style="{ width: '300px' }"
            >
              <el-input v-model="getDataObj.contactTel" />
            </el-form-item>
          </div>

          <el-form-item label="机构地址" prop="address">
            <el-input
              style="width: 600px"
              type="textarea"
              v-model="ruleForm.address"
            />
          </el-form-item>
          <el-form-item label=" &nbsp;&nbsp;机构介绍" prop="desc">
            <el-input
              style="width: 600px"
              type="textarea"
              v-model="getDataObj.description"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitInfo"> 保存 </el-button>
            <el-button @click="resetForm">返回</el-button>
          </el-form-item>
        </el-form>
        <div class="oganpic">
          <div style="display: flex; align-items: center">
            <span style="margin-right: 5px">机构图片</span>
            <Upload @getPicUrl="getPic" :picture="pic" :flag="false"></Upload>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部的部分 -->
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import api from '@/api/index'
import Upload from '@/components/zxy/Upload.vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

interface RuleForm {
  name: string
  address: string
}

// 判读是否向子组件传值

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const getDataObj = ref({
  contactName: '',
  picture: '',
  name: '',
  contactTel: '',
  address: '',
  description: '',
})

const ruleForm = reactive<RuleForm>({
  name: '',
  address: '',
})

const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],

  address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
})

// 获取子传过来的图片url地址
const getPic = (arg: string) => {
  // console.log('获取的地址', arg)
  // 将请求参数进行重新赋值
  getDataObj.value.picture = arg
}

// 点击保存按钮时候提交信息
const submitInfo = async () => {
  getDataObj.value.name = ruleForm.name
  getDataObj.value.address = ruleForm.address
  // console.log('提交的参数', getDataObj.value)
  const res = await api.organization.addOrganizationApi(getDataObj.value)
  console.log('新增结果', res)
  if (res.data.code === 200) {
    ElMessage({
      message: res.data.msg,
      grouping: true,
      type: 'success',
    })
  }
  router.push('jg')
}

//
const pic = ref({ picure: '' })

// 点击返回时候。路由跳转
const router = useRouter()

// 点击返回的函数，清空数据，给upload传递参数，图片进行清空
const resetForm = () => {
  ruleForm.address = ''
  ruleForm.name = ''
  getDataObj.value.name = ''
  getDataObj.value.contactName = ''
  getDataObj.value.contactTel = ''
  getDataObj.value.description = ''
  pic.value.picure = ''
  router.push('jg')
}
</script>

<style scoped>
.organization {
  width: 98%;
  height: 800px;
  margin: auto;
  background-color: #fff;
}

.top-organization::before {
  margin-left: 5px;
  margin-top: 5px;
  content: '';
  display: inline-block;
  width: 10px;
  height: 30px;
  background-color: skyblue;
  margin-right: 10px;
  border-radius: 6px;
}

.top-organization {
  font-size: 20px;
  display: flex;
  align-items: center;
}

.line {
  margin: 10px;
}
.middile {
  margin: 10px;
}

/* 图片上传 */
.oganpic {
  margin-right: 50px;
}
</style>
